<template>
  <el-pagination
    v-if="show"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :total="total"
    :page-sizes="sizes"
    :layout="layout"
    @size-change="handleSizeChange"
    @current-change="handCurrentChange"
  >
  </el-pagination>
</template>

<script>
export default {
  name: "Pagination",

  props: {
    show: {
      type: Boolean,
      default: true,
    },
    page: {
      type: Number,
      default: 1,
    },
    size: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 10,
    },
    sizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50, 100];
      },
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
  },

  data() {
    return {};
  },

  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      },
    },
    pageSize: {
      get() {
        return this.size;
      },
      set(val) {
        this.$emit("update:size", val);
      },
    },
  },

  mounted() {},

  methods: {
    handleSizeChange(val) {
      if (this.currentPage * val > this.total) {
        this.currentPage = 1;
      }
      this.$emit("change", { page: this.currentPage, size: val });
    },
    handCurrentChange(val) {
      this.$emit("change", { page: val, size: this.pageSize });
    },
  },
};
</script>
